<template>
  <a-modal :title="title" :after-close="reset" @ok="submit">
    <a-form
      ref="formRef"
      :model="form"
      :rules="rules"
      :label-col="{ style: { width: '80px' } }"
    >
      <a-form-item label="类型" name="type">
        <a-radio-group
          v-model:value="form.menuType"
          :options="typeOptions"
          option-type="button"
          button-style="solid"
        />
      </a-form-item>
      <a-form-item name="name" label="菜单名称">
        <a-input v-model:value="form.name" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="上级菜单" name="pid">
        <a-tree-select
          v-model:value="form.pid"
          placeholder="请选择"
          allow-clear
          show-search
          style="width: 100%"
          :tree-line="{ showLine: true }"
          tree-default-expand-all
          :tree-data="menuData"
          :field-names="{
            label: 'name',
            value: 'id',
          }"
        />
      </a-form-item>
      <a-form-item
        v-if="form.menuType === 'C'"
        label="菜单URL"
        name="component"
      >
        <a-input v-model:value="form.component" placeholder="请输入" />
      </a-form-item>
      <a-form-item v-if="form.menuType !== 'M'" label="授权标识" name="perms">
        <a-input
          v-model:value="form.perms"
          placeholder="多个用逗号分隔; 如: user:list,user:create"
        />
      </a-form-item>
      <a-form-item v-if="form.menuType !== 'A'" label="排序号" name="sort">
        <a-input-number v-model:value="form.sort" :min="0" :precision="0" />
      </a-form-item>
      <a-form-item v-if="form.menuType !== 'A'" label="图标" name="icon">
        <a-input v-model:value="form.icon" placeholder="请输入" />
      </a-form-item>
      <a-form-item name="status" label="状态">
        <a-radio-group v-model:value="form.isShow">
          <a-radio :value="true"> 显示 </a-radio>
          <a-radio :value="false"> 隐藏 </a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { saveMenu, getMenuById, getMenus } from './api';
import { Menu, type IMenu } from './entity';
import { validReg } from '@/utils/validate';
import { arr2tree } from '@/utils';

const props = withDefaults(defineProps<{
  data: Partial<IMenu>
}>(),{
})
const title = computed(() => props.data.id ? '编辑' : '新增')
const typeOptions = [
  { label: '目录', value: 'M' },
  { label: '菜单', value: 'C' },
  { label: '按钮', value: 'A' }
]


const { formRef, submit, close, attrs } = useDialog({ validCallback: save, id: 'id' })

let form = $ref(new Menu())
watchEffect(() => {
  if (props.data.id) {
    getMenuById(props.data.id).then(menu => {
      form.setProps(menu)
    })
  }
})

const rules = {
  name: [validReg('required', '请输入菜单名称')],
  parentId: [validReg('required', '请选择上级菜单', 'change')],
  url: [validReg('required', '请输入菜单url')]
}

watchEffect(() => {
  if (attrs.visible) {
    getMenuData()
  }
})
const emit = defineEmits(['change'])
function save() {
  saveMenu(form).then(() => {
    AntMessage.success('保存成功')
    close()
    emit('change')
  })
}

let menuData = $ref<IMenu[]>([])
function getMenuData() {
  getMenus({}).then((res) => {
    menuData = arr2tree<IMenu>(res.list, { id: 'id', rootId: 0 })
  })
}

function reset() {
  form = new Menu()
}
</script>

<style lang="less"></style>
